<template>
    <ul>
        <li v-for="item in list" :key="item.id" @click="Home">
            <div><img style="width: 100%;" :src="item.image" alt=""></div>
            <p>{{ item.title }}</p>
            <p style="color: red;">￥{{ item.price }}</p>
        </li>
    </ul>
</template>
<script setup>
import request from '@/utils/request.js';
import { onMounted,ref } from 'vue';

import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()

const list=ref([]);
onMounted(()=>{
    request.get('/list',{
        params:{pagination:1, pageNum:30}
    }).then(res=>{
        if(res.data.code==200){
            list.value=res.data.data;
        }
    })
})
const Home=()=>{
    store.orderList(list.value);
}
</script>
<style lang="scss" scoped>
ul{
    column-count: 2;
    li{
        break-inside: avoid;
    }
}
</style>